<!-- 统一搜索栏 -->
<script lang="ts" setup>
import type { IDbSearch, IDbSearchConfig } from '@/types/global'
import { Search } from '@element-plus/icons-vue'
import type { PropType } from 'vue'
import { computed } from 'vue'
import { ref } from 'vue'

const emits = defineEmits(['search', 'more'])

const props = defineProps({
  config: {
    type: Array as PropType<IDbSearchConfig[]>,
    default() {
      return [] as IDbSearchConfig[]
    }
  },
  search: {
    type: Object as PropType<IDbSearch>,
    default() {
      return {} as IDbSearch
    }
  }
})
// 是否显示全部搜索项
const showAll = ref(false)
// 当前显示的配置项
const filterConfig = computed(() => {
  if (!showAll.value) {
    return props.config.filter((item, index) => {
      return index < 3
    })
  }
  return props.config
})

/**
 * 点击更多
 */
function moreClick() {
  // 收起时清空被收起的数据
  if (showAll.value) {
    props.config.forEach((item, index) => {
      if (index >= 3) {
        props.search[item.prop] = item.default ?? ''
      }
    })
  }
  showAll.value = !showAll.value
  emits('more')
}
/**
 * 点击搜索
 */
function searchClick() {
  emits('search')
}
</script>

<template>
  <div class="dui-search-bg">
    <template v-for="(item, index) in filterConfig" :key="index">
      <div class="dui-search-item" :style="`width: ${item.width || '180px'}`">
        <div class="dui-search-item-inner">
          <!-- slot -->
          <slot v-if="item.type == 'slot'" :name="item.prop + 'Slot'"></slot>
          <!-- input -->
          <el-input
            v-else-if="item.type == 'input'"
            v-model="search[item.prop]"
            :placeholder="item.label"
            clearable
            v-bind="item.options || {}"
            @change="item.change"
          />
          <!-- select -->
          <el-select
            v-else-if="item.type == 'select'"
            v-model="search[item.prop]"
            :placeholder="item.label"
            clearable
            filterable
            v-bind="item.options || {}"
            @change="item.change"
          >
            <el-option
              v-for="listItem in item.list || []"
              :key="listItem.value"
              :label="listItem.label"
              :value="listItem.value"
            />
          </el-select>
          <!-- selectGroup -->
          <el-select
            v-else-if="item.type == 'selectGroup'"
            v-model="search[item.prop]"
            :placeholder="item.label"
            clearable
            filterable
            v-bind="item.options || {}"
            @change="item.change"
          >
            <el-option-group v-for="group in item.list" :key="group.label" :label="group.label">
              <el-option v-for="child in group.children || []" :key="child.value" :label="child.label" :value="child.value" />
            </el-option-group>
          </el-select>
          <!-- tree -->
          <el-tree-select
            v-else-if="item.type == 'tree'"
            v-model="search[item.prop]"
            :data="item.list || []"
            check-strictly
            :render-after-expand="false"
            clearable
            v-bind="item.options || {}"
            @change="item.change"
          />
          <!-- date -->
          <el-date-picker
            v-else-if="item.type == 'date'"
            v-model="search[item.prop]"
            type="datetime"
            :placeholder="item.label"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            v-bind="item.options || {}"
            @change="item.change"
          />
        </div>
      </div>
    </template>
    <div class="dui-search-btns">
      <el-button v-if="config.length > 3" type="primary" link @click="moreClick">
        {{ showAll ? '收起' : '更多' }}
      </el-button>
      <el-button style="height: 30px" type="primary" :icon="Search" @click="searchClick"></el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dui-search-bg {
  max-height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 5px;
  box-sizing: border-box;
  .dui-search-item {
    position: relative;
    height: 30px;
    margin-bottom: 10px;
    .dui-search-item-inner {
      position: absolute;
      left: -5px;
      top: 0;
      width: calc(100% + 5px);
      height: 100%;
    }
  }
  .dui-search-btns {
    padding-left: 12px;
    height: 30px;
  }
}
</style>
